<template>
  <div class="share-page">
    <!-- 头部 -->
    <AppHeader functionName="云檐藏阁" theme="light" maxWidth="100%"></AppHeader>
    
    <div class="share-container">
      <!-- 左侧分享内容区 -->
      <div class="share-content">
        <!-- 提取码验证区域 -->
        <div v-if="!isVerified" class="verification-section">
          <div class="user-info">
            <div class="user-avatar">
              <el-icon><User /></el-icon>
            </div>
            <div class="user-details">
              <h3 class="user-name">{{ shareInfo.sharerName || '匿名用户' }}</h3>
              <p class="user-status">分享了文件</p>
              <p class="file-name">{{ shareInfo.fileName || '加载中...' }}</p>
            </div>
          </div>
          
          <div class="verification-content">
            <div class="verification-prompt">
              <p>请输入提取码，不区分大小写</p>
            </div>
            
            <div class="verification-form">
              <el-input
                v-model="extractCode"
                placeholder="请输入提取码"
                size="large"
                maxlength="6"
                show-word-limit
                @keyup.enter="handleVerify"
                :disabled="verifying"
                class="extract-input">
              </el-input>
              
              <el-button 
                type="primary" 
                size="large" 
                @click="handleVerify"
                :loading="verifying"
                class="extract-btn">
                {{ verifying ? '验证中...' : '提取文件' }}
              </el-button>
            </div>
            
            <div v-if="errorMessage" class="error-message">
              <el-icon><WarningFilled /></el-icon>
              <span>{{ errorMessage }}</span>
            </div>
          </div>
        </div>

         <!-- 文件信息展示区域 -->
         <div v-else class="file-info-section">
           <!-- 文件信息区域 -->
           <div class="file-info-area">
             <!-- 分享者信息 -->
             <div class="sharer-header">
               <div class="user-avatar">
                 <el-icon><User /></el-icon>
               </div>
               <div class="user-info">
                 <span class="username">{{ shareInfo.sharerName || '张三' }}</span>
                 <span class="share-label">向你分享了文件</span>
               </div>
             </div>
             
             <!-- 文件主要信息 -->
             <div class="file-main-info">
               <div class="file-icon-large">
                 <FileTypeIcon :fileType="shareInfo.fileType" />
               </div>
               <div class="file-details">
                 <h2 class="file-name">{{ shareInfo.fileName }}</h2>
                 <div class="file-meta">
                   <span class="share-time">分享时间：{{ shareInfo.shareTime || '2025-10-24 15:30' }}</span>
                   <span class="expire-info">过期时间：19小时后</span>
                   <span class="file-type-badge">{{ getFileTypeText(shareInfo.fileType) }}</span>
                 </div>
               </div>
             </div>
             <!-- 操作区域 -->
             <div class="action-area">
               <el-button 
                 type="primary" 
                 class="download-btn"
                 @click="handleDownload"
                 :loading="downloading">
                 {{ downloading ? '下载中...' : '下载' }}
               </el-button>
             </div>
           </div>

         </div>
      </div>

      <!-- 右侧宣传区域（桌面端显示，仅在未验证时显示） -->
      <div v-if="!isVerified" class="promo-section">
        <!-- 背景图形元素 -->
        <div class="bg-elements">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
          <div class="shape shape-4"></div>
        </div>

        <div class="promo-content">
          <div class="left-content">
            <h1 class="title">云檐藏阁</h1>
            <p class="subtitle">智能云存储，安全管理，便捷分享</p>
            <div class="description">
              <p>「云檐藏阁」是您的个人云端仓库，为您提供安全可靠的文件存储、智能管理与便捷分享服务。无论何时何地，轻松访问您的所有文件。</p>
            </div>
            <div class="action-buttons">
              <el-button type="primary" size="large" @click="navigateToHome" class="start-button">
                <el-icon class="button-icon"><ArrowRight /></el-icon>
                开始体验
              </el-button>
            </div>
          </div>

          <div class="right-content">
            <div class="feature-illustration">
              <div class="floating-folder folder-1">
                <el-icon><FolderOpened /></el-icon>
                <span>文档</span>
              </div>
              <div class="floating-folder folder-2">
                <el-icon><Picture /></el-icon>
                <span>图片</span>
              </div>
              <div class="floating-folder folder-3">
                <el-icon><VideoPlay /></el-icon>
                <span>视频</span>
              </div>
              <div class="floating-folder folder-4">
                <el-icon><Files /></el-icon>
                <span>文件</span>
              </div>
              <div class="center-circle">
                <el-icon><Connection /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Share, Key, WarningFilled, Download, User, 
  Files, ArrowRight, FolderOpened, 
  Picture, VideoPlay, Connection, DocumentCopy 
} from '@element-plus/icons-vue'
import FileTypeIcon from '~/components/FileTypeIcon.vue'

// ==================== 路由和状态 ====================
const route = useRoute()
const router = useRouter()

const shorturl = ref(route.params.shorturl)
const isVerified = ref(false)
const verifying = ref(false)
const downloading = ref(false)
const extractCode = ref('')
const errorMessage = ref('')

// ==================== 分享信息 ====================
const shareInfo = ref({
  fileName: '',
  fileType: '',
  fileSize: 0,
  shareTime: '',
  viewCount: 0,
  downloadCount: 0,
  sharerName: '',
  shareNote: '',
  downloadUrl: ''
})


// ==================== 生命周期 ====================
onMounted(() => {
  loadShareInfo()
})

// ==================== 数据加载 ====================
const loadShareInfo = async () => {
  try {
    // 模拟API调用获取分享基本信息
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 模拟数据 - 实际项目中应该根据shorturl调用API
    const mockShareInfo = {
      fileName: '项目演示文档.pdf',
      fileType: 'pdf',
      fileSize: 2048576, // 2MB
      shareTime: '2025-10-24 15:30',
      viewCount: 15,
      downloadCount: 8,
      sharerName: '张三',
      shareNote: '这是项目的演示文档，请查阅',
      downloadUrl: 'https://example.com/download/demo.pdf',
      extractCode: '123456' // 实际项目中不会返回给前端
    }
    
    shareInfo.value = mockShareInfo
  } catch (error) {
    ElMessage.error('加载分享信息失败')
  }
}

// ==================== 验证功能 ====================
const handleVerify = async () => {
  if (!extractCode.value.trim()) {
    errorMessage.value = '请输入提取码'
    return
  }

  verifying.value = true
  errorMessage.value = ''

  try {
    // 模拟API验证
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 模拟验证逻辑 - 实际项目中应该调用API验证
    if (extractCode.value === '123456') {
      isVerified.value = true
      ElMessage.success('验证成功')
      
      // 增加浏览次数
      shareInfo.value.viewCount++
    } else {
      errorMessage.value = '提取码错误，请重新输入'
    }
  } catch (error) {
    errorMessage.value = '验证失败，请稍后重试'
  } finally {
    verifying.value = false
  }
}

// ==================== 文件操作 ====================
const handleDownload = async () => {
  downloading.value = true
  
  try {
    // 模拟下载延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 创建下载链接
    const link = document.createElement('a')
    link.href = shareInfo.value.downloadUrl
    link.download = shareInfo.value.fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    // 增加下载次数
    shareInfo.value.downloadCount++
    
    ElMessage.success('下载开始')
  } catch (error) {
    ElMessage.error('下载失败')
  } finally {
    downloading.value = false
  }
}


// ==================== 工具函数 ====================
const formatFileSize = (bytes) => {
  if (!bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const getFileTypeText = (type) => {
  const typeMap = {
    'pdf': 'PDF文档',
    'image': '图片文件',
    'video': '视频文件',
    'audio': '音频文件',
    'zip': '压缩文件',
    'folder': '文件夹',
    'doc': '文档文件'
  }
  return typeMap[type] || '未知类型'
}

// ==================== 导航功能 ====================
const navigateToHome = () => {
  router.push('/')
}
</script>

<style lang="scss" scoped>
.share-page {
  min-height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.share-container {
  display: flex;
  min-height: calc(100vh - 60px);
  
  @media (max-width: 1024px) {
    flex-direction: column;
  }
}

// ==================== 左侧分享内容区 ====================
.share-content {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8f0fe 100%);
  
  // 当验证成功且右侧隐藏时，居中显示
  &:only-child {
    align-items: center;
    max-width: 100%;
  }
  
  @media (max-width: 768px) {
    padding: 20px;
  }
}

// 验证区域
.verification-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  
  @media (max-width: 768px) {
    padding: 40px 20px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    
    .user-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-right: 20px;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #3578e5, #1a237e);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .el-icon {
        font-size: 36px;
        color: white;
      }
    }
    
    .user-details {
      .user-name {
        font-size: 24px;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0;
      }
      
      .user-status {
        font-size: 14px;
        color: #666;
        margin: 0 0 8px 0;
      }
      
      .file-name {
        font-size: 16px;
        color: #3578e5;
        margin: 0;
        font-weight: 500;
      }
    }
  }
  
  .verification-content {
    width: 100%;
    max-width: 400px;
    text-align: center;
    
    .verification-prompt {
      margin-bottom: 30px;
      
      p {
        font-size: 16px;
        color: #666;
        margin: 0;
      }
    }
    
    .verification-form {
      .extract-input {
        margin-bottom: 20px;
        
        :deep(.el-input__wrapper) {
          border-radius: 25px;
          padding: 0 20px;
          height: 50px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          border: none;
        }
        
        :deep(.el-input__inner) {
          font-size: 16px;
          text-align: center;
        }
      }
      
      .extract-btn {
        width: 100%;
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        background: linear-gradient(135deg, #3578e5, #1a237e);
        border: none;
        border-radius: 25px;
        box-shadow: 0 4px 12px rgba(53, 120, 229, 0.3);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(53, 120, 229, 0.4);
        }
      }
    }
    
    .error-message {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f56c6c;
      font-size: 14px;
      margin-top: 16px;
      
      .el-icon {
        margin-right: 8px;
      }
    }
  }
}

// 文件信息区域
.file-info-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px;
  background: linear-gradient(135deg, #f0f4f8 0%, #e8f0fe 100%);
  @media (max-width: 768px) {
    padding: 30px 20px;
  }
  
  // 文件信息区域
  .file-info-area {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    min-width: 700px;
    max-width: 900px;
    width: 80%;
    
    @media (max-width: 768px) {
      min-width: auto;
      width: 95%;
      max-width: none;
    }
    // 分享者信息
    .sharer-header {
      background: linear-gradient(135deg, rgba(53, 120, 229, 0.05), rgba(26, 35, 126, 0.05));
      padding: 24px 40px;
      border-bottom: 1px solid rgba(53, 120, 229, 0.1);
      display: flex;
      align-items: center;
      gap: 16px;
      
      .user-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3578e5, #1a237e);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(53, 120, 229, 0.3);
        
        .el-icon {
          font-size: 20px;
          color: white;
        }
      }
      
      .user-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        
        .username {
          font-size: 18px;
          color: #333;
          font-weight: 600;
        }
        
        .share-label {
          font-size: 13px;
          color: #666;
          font-weight: 400;
        }
      }
    }
    
    // 文件主要信息
    .file-main-info {
      padding: 40px;
      text-align: center;
      
      .file-icon-large {
        margin-bottom: 24px;
        
        :deep(.item-cover-img) {
          width: 120px !important;
          height: 120px !important;
          border-radius: 16px;
        }
      }
      
      .file-details {
        .file-name {
          font-size: 20px;
          font-weight: 600;
          color: #333;
          margin: 0 0 20px 0;
          line-height: 1.3;
        }
        
        .file-meta {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
          font-size: 14px;
          flex-wrap: wrap;
          
          .share-time {
            color: #666;
            font-weight: 500;
          }
          
          .expire-info {
            color: #ff4d4f;
            font-weight: 600;
          }
          
          .file-type-badge {
            background: rgba(53, 120, 229, 0.1);
            padding: 6px 12px;
            border-radius: 16px;
            color: #3578e5;
            font-weight: 600;
            font-size: 13px;
          }
        }
      }
    }
    
    // 操作区域
    .action-area {
      padding: 0px 40px 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(248, 250, 252, 0.3);
      
      .download-btn {
        background: linear-gradient(135deg, #3578e5, #1a237e);
        border: none;
        font-size: 16px;
        font-weight: 600;
        height: 48px;
        padding: 0 40px;
        border-radius: 26px;
        box-shadow: 0 6px 20px rgba(53, 120, 229, 0.3);
        transition: all 0.3s ease;
        min-width: 200px;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(53, 120, 229, 0.4);
        }
        
        &:active {
          transform: translateY(-1px);
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .file-info-area {
      .sharer-header {
        padding: 20px;
        gap: 12px;
        
        .user-avatar {
          width: 40px;
          height: 40px;
          
          .el-icon {
            font-size: 18px;
          }
        }
        
        .user-info {
          .username {
            font-size: 15px;
          }
          
          .share-label {
            font-size: 12px;
          }
        }
      }
      
      .file-main-info {
        padding: 40px 20px;
        
        .file-icon-large {
          margin-bottom: 20px;
          
          :deep(.item-cover-img) {
            width: 100px !important;
            height: 100px !important;
          }
        }
        
        .file-details {
          .file-name {
            font-size: 20px;
            margin-bottom: 16px;
          }
          
          .file-meta {
            font-size: 13px;
            gap: 12px;
            flex-direction: column;
            
            .file-type-badge {
              font-size: 12px;
            }
          }
        }
      }
      
      .action-area {
        padding: 25px 20px 35px;
        
        .download-btn {
          width: 100%;
          max-width: 280px;
          height: 48px;
          font-size: 15px;
        }
      }
    }
  }
}

// ==================== 右侧宣传区域 ====================
.promo-section {
  flex: 1;
  position: relative;
  overflow: hidden;
  
  @media (max-width: 1024px) {
    display: none;
  }
  
  // 背景图形元素
  .bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    
    .shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.5;
      
      &.shape-1 {
        width: 400px;
        height: 400px;
        background: linear-gradient(135deg, #3498db, #1e88e5);
        top: -200px;
        right: -100px;
        filter: blur(80px);
      }
      
      &.shape-2 {
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, #4caf50, #8bc34a);
        bottom: -150px;
        left: -150px;
        filter: blur(60px);
      }
      
      &.shape-3 {
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, #9c27b0, #673ab7);
        top: 50%;
        left: 15%;
        filter: blur(50px);
        opacity: 0.3;
      }
      
      &.shape-4 {
        width: 250px;
        height: 250px;
        background: linear-gradient(135deg, #ff9800, #f44336);
        bottom: 20%;
        right: 10%;
        filter: blur(60px);
        opacity: 0.2;
      }
    }
  }
  
  // 主容器
  .promo-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 60px;
    min-height: 100%;
    
    @media (max-width: 1200px) {
      flex-direction: column;
      padding: 60px 40px;
      text-align: center;
    }
  }
  
  // 左侧内容
  .left-content {
    flex: 1;
    max-width: 550px;
    
    @media (max-width: 1200px) {
      max-width: 100%;
      margin-bottom: 60px;
    }
    
    .title {
      font-size: 56px;
      font-weight: bold;
      color: #222;
      margin-bottom: 16px;
      font-family: "STXihei", "华文细黑", sans-serif;
      background: linear-gradient(135deg, #3578e5, #1a237e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .subtitle {
      font-size: 24px;
      color: #444;
      margin-bottom: 24px;
      font-family: "STKaiti", "楷体", serif;
    }
    
    .description {
      margin-bottom: 40px;
      
      p {
        font-size: 16px;
        line-height: 1.8;
        color: #666;
        font-family: "STKaiti", "楷体", serif;
      }
    }
    
    .action-buttons {
      display: flex;
      gap: 16px;
      
      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
      }
      
      .start-button {
        background: linear-gradient(135deg, #3578e5, #1a237e);
        border: none;
        padding: 12px 36px;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 8px 16px rgba(53, 120, 229, 0.3);
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 20px rgba(53, 120, 229, 0.4);
        }
        
        .button-icon {
          margin-right: 8px;
        }
      }
    }
  }
  
  // 右侧图形展示
  .right-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .feature-illustration {
      position: relative;
      width: 500px;
      height: 500px;
      @media (max-width: 1200px) {
        width: 460px;
        height: 460px;
      }
      
      .center-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, #3578e5, #1a237e);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 15px 30px rgba(26, 35, 126, 0.4);
        z-index: 2;
        
        .el-icon {
          font-size: 40px;
          color: white;
        }
      }
      
      .floating-folder {
        position: absolute;
        padding: 20px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        animation: float 6s infinite ease-in-out;
        width: 120px;
        height: 120px;
        
        .el-icon {
          font-size: 40px;
          margin-bottom: 10px;
        }
        
        span {
          font-size: 18px;
          font-weight: bold;
        }
        
        &.folder-1 {
          top: 12%;
          left: 10%;
          animation-delay: 0s;
          
          .el-icon {
            color: #2C6BED;
          }
        }
        
        &.folder-2 {
          top: 12%;
          right: 10%;
          animation-delay: 1.5s;
          
          .el-icon {
            color: #4CAF50;
          }
        }
        
        &.folder-3 {
          bottom: 12%;
          right: 10%;
          animation-delay: 3s;
          
          .el-icon {
            color: #AB4CDB;
          }
        }
        
        &.folder-4 {
          bottom: 12%;
          left: 10%;
          animation-delay: 4.5s;
          
          .el-icon {
            color: #FF9800;
          }
        }
      }
    }
  }
}


// ==================== 动画 ====================
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

// ==================== 响应式设计 ====================
@media (max-width: 768px) {
  .share-container {
    padding: 0;
  }
  
  .share-content {
    padding: 20px;
  }
  
  .verification-card,
  .file-info-card {
    margin: 0 10px;
  }
}
</style>
